<style scoped>
  .login {
    width: 100%;
    height: 100%;
    background-image: url('../../assets/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
  }

  .login .from-wrap {
    position: fixed;
    background-color: #fff;
    left: 50%;
    margin-left: -200px;
    top: 50%;
    margin-top: -150px;
    width: 400px;
    height: 300px;
    border-radius: 10px;
    opacity: 0.88;
    padding: 20px 30px;
  }

  .login h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .login FormItem {
    margin-bottom: 15px;
  }

  .login .form-footer {
    text-align: right;
  }

  .ivu-form-item-required .ivu-form-item-label:before {
    display: none;
  }

  .yz {
    width: 30%;
    height: 30%;
  }
  
</style>
<template>
  <div class="login">
    <div class="from-wrap">
      <h2>登录</h2>
      <Form ref="loginData" :model="loginData" :rules="ruleValidate" :label-width="80">
        <FormItem label="账号" prop="acct">
          <Input type="text" v-model="loginData.acct" prefix="md-person" autofocus placeholder="输入用户名、手机或者邮箱"
            clearable></Input>
        </FormItem>
        <FormItem label="密码" prop="userPassword">
          <Input type="password" v-model="loginData.userPassword" prefix="md-key" placeholder="请输入密码" clearable></Input>
        </FormItem>
        <FormItem label prop="vCode">
          <Input style="width:100px;float:left" type="text" v-model="loginData.vCode" placeholder="验证码"
            @keyup.enter.native="handleSubmit(loginData)"></Input>
          <span @click="changevCode()">
            <a>
              <img class="yz" :src="yzm" />
            </a>
          </span>
        </FormItem>
        <FormItem class="form-footer">
          <Button type="primary" @click="handleSubmit(loginData)">登录</Button>
          <Button to="/register" style="margin-left: 8px">注册</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>


<script>
  import { request } from "http";
  export default {
    data() {
      return {
        loginData: {
          acct: "",
          userName: "",
          userEmail: "",
          userTelephone: "",
          userPassword: "",
          vCode: ""
        },
        ruleValidate: {
          acct: [
            { required: true, message: "账号不能为空", trigger: "blur" },
            { min: 3, max: 20, message: "账号长度3-20个字符", trigger: "blur" }
          ],
          userPassword: [
            { required: true, message: "密码不能为空", trigger: "blur" },
            {
              type: "string",
              min: 6,
              max: 20,
              message: "密码长度6-20个字符",
              trigger: "blur"
            }
          ],
          vCode: [{ required: true, message: "未填写验证码", trigger: "blur" }]
        },
        yzm: this.$host + "/account/authcode"
      };
    },
    created() {
      this.changevCode();
    },
    methods: {
      changevCode() {
        var num = Math.ceil(Math.random() * 10); //生成一个随机数（防止缓存）
        this.yzm = this.$host + "/account/authcode?" + num;
      },
      emailCheck(value) {
        var reg = new RegExp(
          "^([0-9A-Za-z\\-_\\.]+)@([0-9a-z]+\\.[a-z]{2,3}(\\.[a-z]{2})?)$"
        ); //正则表达式
        if (value === "") {
          //输入不能为空
          return false;
        } else if (!reg.test(value)) {
          //正则验证不通过，格式不对
          return false;
        } else {
          return true;
        }
      },
      phoneCheck(pone) {
        var re = /^\d{11}$/; //正则表达式
        if (re.test(pone)) {
          return true;
        } else {
          return false;
        }
      },
      loginway(name) {
        if (this.emailCheck(name.acct)) {
          name.userEmail = name.acct;
        } else if (this.phoneCheck(name.acct)) {
          name.userTelephone = name.acct;
        } else {
          name.userName = name.acct;
        }
      },

      handleSubmit(name) {
        this.loginway(name);
        this.$axios
          .post(this.$host + "/account/login", {
            userName: name.userName,
            userEmail: name.userEmail,
            userTelephone: name.userTelephone,
            userPassword: name.userPassword,
            vCode: name.vCode
          })
          .then(res => {
            if (res.data.data.isCorrect) {
              this.$Message.success("登录成功!");
              switch (res.data.data.userInfo.userType) {
                case 1:
                  name.userName = res.data.data.userName;
                  this.$router.replace({
                    name: "Home",
                    params: { userName: name.userName }
                  });
                  break;
              }
            } else {
              this.$Message.error("登录失败");
              this.changevCode();
            }
          });
      }
    }
  };
</script>